<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="4">
        <el-input
          v-model="queryForm.name"
          clearable
          placeholder="请输入姓名搜索"
        />
      </el-col>
      <el-button type="primary" :icon="Search" @click="initVisitorList"
        >搜索</el-button
      >
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        :width="item.width"
        :prop="item.prop"
        :label="item.label"
        v-for="(item, index) in userManagement_table_recycle"
        :key="index"
        sortable
      >
        <template v-slot="{ row }" v-if="item.prop === 'gender'">
          {{ row.gender == 0 ? "男性" : "女性" }}
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'status'">
          <el-switch
            v-model="row.status"
            class="ml-2"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeUserStatus(row)"
          />
        </template> </el-table-column
      >>
    </el-table>
    <el-pagination
      v-model:currentPage="queryForm.page"
      v-model:page-size="queryForm.size"
      :page-sizes="[1, 2, 5, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  getVisitorList,
  banVisitor,
  activateVisitor,
} from "@/service/api_admin";
import { userManagement_table_recycle } from "./options";
import { ElMessage, ElMessageBox } from "element-plus";
const queryForm = ref({
  page: 1,
  size: 10,
  name: "",
});

const total = ref(0);
const tableData = ref([]);

const initVisitorList = async () => {
  //重新定义一个queryForm
  const tmp = {
    page: queryForm.value.page - 1,
    size: queryForm.value.size,
    name: queryForm.value.name,
  };
  const res = await getVisitorList(tmp);
  tableData.value = res.data.result.visitorList;
  total.value = res.data.result.totalCount;
  //   console.log(res.data);
  //   console.log(res.data.result.visitorList);
  console.log(res.data.result);
};
initVisitorList();

const changeUserStatus = async (row) => {
  ElMessageBox.confirm("将要更改用户权限，确认继续？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    if (row.status == 1) {
      const visitorID = row.visitorID.toString();
      const msg_res = await banVisitor(visitorID);
      if (msg_res.data.code == 0) {
        ElMessage({ type: "success", message: "成功禁用" + row.name });
      } else {
        ElMessage({ type: "warning", message: "禁用失败" });
        row.status == 0;
      }
      initVisitorList();
    } else if (row.status == 0) {
      const visitorID = row.visitorID.toString();
      const msg_res = await activateVisitor(visitorID);
      if (msg_res.data.code == 0) {
        ElMessage({ type: "success", message: "成功启用" + row.name });
      } else {
        ElMessage({ type: "warning", message: "启用失败" });
        row.status == 0;
      }
      initVisitorList();
    }
  })
    .catch(() => {
      if (row.status == 1) 
      {
        row.status = 0
      }
      else 
      {
        row.status = 1
      }
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    });
};

const handleSizeChange = (pageSize) => {
  queryForm.value.page = 1;
  queryForm.value.size = pageSize;
  initVisitorList();
};

const handleCurrentChange = (pageNum) => {
  queryForm.value.page = pageNum;
  initVisitorList();
};
</script>

<style lang="less" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
.el-pagination {
  margin-top: 10px;
}
</style>
